<script setup>
import {exportAnswerAllExcelApi, exportAnswerListExcelApi, getSurveysStatisticsApi} from "../../apis/SurveysApi.js";
import {Message} from "@arco-design/web-vue";
import {onMounted, ref} from "vue";
import StatisticsQuestion from "../../components/statistics/StatisticsQuestion.vue";

const props = defineProps({
    surveyId:{
        type:String,
        required:true
    }
})
const statistics = ref({})
const isLoading = ref(true)

const exportLoading = ref(false)
const exportExcel = async () => {
    exportLoading.value = true
    await exportAnswerAllExcelApi(props.surveyId);
    exportLoading.value = false
}
async function getSurveysStatistics() {
    isLoading.value = true
    const res = await getSurveysStatisticsApi(props.surveyId)
    isLoading.value = false
    if (res.code === 0){
        statistics.value = res.data
    }else{
        Message.error(res.message)
    }
}

onMounted(async () => {
    await getSurveysStatistics(props.surveyId)
})
</script>

<template>
    <div class="w-full  min-h-[90vh]">
        <a-button type="primary" class="mb-3 ml-4" @click="exportExcel"
                  :disabled="isLoading"
                  :loading="exportLoading"> 导出比例统计数据</a-button>
        <a-button type="primary" class="mb-3 ml-4"
                  :disabled="isLoading"
                  @click="getSurveysStatistics()" > 刷新</a-button>
        <h2 class="text-xl font-bold text-center">{{statistics.title}}</h2>
        <div class="mt-4 mx-auto w-[850px] min-h-96 bg-gray-50 rounded-md border border-gray-300">
            <a-spin v-show="isLoading" class="block mx-auto" dot tip="加载中"/>
            <StatisticsQuestion v-for="data in statistics.items" :data="data" :key="data.id"/>
        </div>
    </div>

</template>

<style scoped>

</style>
